<template>
      <!-- 键盘 -->
  <div class="header">
    <div @click="GoProduct(item)" class="items" v-for="(item,index) in itemtest" :key="index">
      <img class="itemimg" :src="item.picture" alt="" srcset="">
       <div class="itemtext">{{item.Commodityname}}</div>
    </div>
  </div>
</template>

<script>
import{useRouter} from 'vue-router'
import { ref, onMounted } from '@vue/runtime-core'
import server from '../request'
export default {
  setup(){
    const router=useRouter()
    // 拿到数据
    const itemtest=ref('')
    onMounted(()=>{
      server.get('/keyboard').then(
        (res)=>{
          itemtest.value=res.data
        }
      )
    })
    let GoProduct=(xixi)=>{
      router.push({
        path:'/Product',
        query:xixi
      })
    }
    return{
      itemtest,
      GoProduct
    }
  }
}
</script>

<style scoped>
.header{
  width: 800px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  background: rgb(255, 255, 255);
  border: 0.25px #acacac solid;
}
.items{
  width: 250px;
  height: 50%;
  text-align: center;
}
.itemtext{
  color:black
}
.items:hover{
  box-shadow: 1px 1px 10px 1px #888888;
}
.itemimg{
  margin-top: 10px;
}
</style>